<template>
	<view>
		<view class="chooseTime flex-y-center" @click="open">
			<view>选择时间：</view>
			<image src="@/static/img/rili.png" class="icon"></image>
			<view style="font-size: 28rpx;">{{date}}</view>
		</view>
		<uni-calendar ref="calendar" :insert="false" @confirm="confirm" />
		<view class="store-list">
			<navigator :url="'/pages/details/details?id='+id+'&date='+date" class="store-item" v-for="(item,index) in storeList3" :key="index">
				<view class="head-item border-bottom info-item">
					<view class="item-left">
						<view class="region-name" :class="[item.platform=='meituan'?'meituan':'elem']">{{item.street}}
						</view>
						<image class="head-img" :src="item.image">
						</image>
					</view>
					<view class="item-right">
						<view class="item">
							<view class="title">{{item.name}}</view>
						</view>
						<view class="item">
							<view>放单时间:</view>
							<view>{{date}}</view>
						</view>
						<view class="item">
							<view>放单:<text class="stock-text">
									{{item.total_stock}}</text></view>
							<view>还剩:<text class="stock-text">
									{{item.stock}}</text></view>
						</view>
						<view class="item">
							<view>餐标:<text class="stock-text">{{item.store_price}}</text></view>
							<image class="icon" src="@/static/img/elm-logo-ico.png" v-if="item.platform=='eleme'">
							</image>
							<image class="icon" src="@/static/img/mt-logo-ico.png" v-if="item.platform=='meituan'">
							</image>
						</view>
					</view>
				</view>
				<view class="head-item border-bottom address-item">
					<view class="address-text">评鉴规则:{{item.rule}}</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	import {
		getActivityDetail,
	} from '../../apirequest/api.js';
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	export default {
		data() {
			return {
				id:0,
				date: new Date().toISOString().slice(0, 10),
				storeList3: [],
			}
		},
		onLoad(o) {
			let id = o.id || 0;
			if (!parseInt(id)) {
				uni.showToast({
					title:'参数错误',
					icon:"error"
				})
				setTimeout(function(){
					uni.navigateBack({
						delta:0
					});
				},1000)
				
				return ;
			}
			this.id = id;
			this.loadData();
		},
		methods: {
			//获取数据
			loadData: function() {
				getActivityDetail({date:this.date,id:this.id}).then((res) => {
					if (res.code == 1) {
						this.storeList3 = res.data.info;
					} else {
						uni.showToast({
							title:res.msg,
							icon:"error"
						});
						setTimeout(function(){
							uni.navigateBack({
								delta:0
							});
						},1000)
					}
				}).catch(err => {
					console.log(err)
				})
			
			},
			open() {
				this.$refs.calendar.open();
			},
			confirm(e) {
				console.log(e);
				this.date=e.fulldate;
				this.storeList3 = [];
				this.loadData();
			}
		}
	}
</script>

<style>
	.chooseTime {
		margin: 9px 14px 9px 14px;
		padding: 9px 12px;
		background: #fff;
		border-radius: 9px;
	}

	.chooseTime .icon {
		width: 40rpx;
		height: 40rpx;
		margin:0 20rpx 0 20rpx;
	}

	.meituan {
		color: #333 !important;
		background-color: #fdd329
	}

	.elem {
		color: #fff !important;
		background-color: #00a9e9
	}

	.store-list {
		display: flex;
		flex-flow: column
	}

	.store-list .store-item {
		border-radius: 9px;
		background-color: #fff;
		margin: 0px 14px 9px 14px;
		padding: 9px 12px;
		position: relative;
		overflow: hidden
			/* 信息项 */
			/* 返现项 */
			/* 更多项 */
			/* 地址项 */
			/* 底部项 */
	}

	.store-list .store-item .head-item {
		display: flex;
		padding: 4px 0
	}

	.store-list .store-item .info-item {
		padding-top: 0
	}

	.store-list .store-item .info-item .item-left {
		position: relative
	}

	.store-list .store-item .info-item .item-left .region-name {
		position: absolute;
		top: -2px;
		right: -1px;
		color: #fff;
		font-size: 24rpx;
		border-radius: 15px 0 0 15px;
		width: 120rpx;
		height: 15px;
		text-align: center;
		z-index: 99;
	}

	.store-list .store-item .info-item .item-left .head-img {
		width: 76px;
		height: 57px;
		display: block;
		border-radius: 9px
	}

	.store-list .store-item .info-item .item-right {
		margin-left: 9px;
		width: 100%;
		display: flex;
		flex-flow: column;
		line-height: 45rpx;
	}

	.store-list .store-item .info-item .item-right .item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx
	}

	.store-list .store-item .info-item .item-right .item .title {
		color: #333;
		font-size: 34rpx;
	}

	.store-list .store-item .info-item .item-right .item .icon {
		width: 20px;
		height: 20px;
	}

	.store-list .store-item .info-item .item-right .item .stock-text {
		color: #ff962a;
		font-size: 28rpx;
	}


	.store-list .store-item .info-item .item-right .item .time-region {
		width: 118px;
		padding: 1px 0;
		color: #fff;
		background-color: #8fc926;
		text-align: center;
		border-radius: 1px
	}

	.store-list .store-item .address-item {
		border-top: 1px solid #f5f5f5;
		padding: 9px 0 0;
	}

	.store-list .store-item .address-item .icon {
		width: 19px;
		height: 19px
	}

	.store-list .store-item .address-item .address-text {
		color: #999;
		font-size: 24rpx;
	}
</style>
